<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <!-- 样式 -->
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css">

  <style>
    .song_wrapper {
      width: 350px;
    }

    .song_list li b {
      width: 270px;
    }

    .player_con {
      width: 250px;
      left: 350px;
    }

    .disc {
      left: 2px;
      top: 140px;
    }

    .cover {
      left: 54px;
      top: 188px;
    }

    .play_bar {
      left: 140px;
      top: 100px;
    } 
  </style>

</head>

<body>
  <div class="wrap">
    <div class="play_wrap" id="player">
      <div class="search_bar">
        <img src="images/player_title.png" alt="" />
        <h3>{{songTitle}}</h3>
        <!-- 搜索歌曲 -->
        <input type="text" autocomplete="off" v-model='query' @keyup.enter="searchMusic();" />

      </div>
      <div class="center_con">

        <!-- 搜索歌曲列表 -->
        <div class='song_wrapper' ref='song_wrapper'>

          <ul class="song_list" v-infinite-scroll="load" style="overflow:auto">
            <li v-for="(item,index) in musicList">
              <!-- 点击放歌  playMusic(item.id) -->
              <a href="javascript:;" @click='playMusic(index)'></a>
              <b>{{item.title}}</b>
              <span>
                <i @click="playMv(index)" v-if="disMvIcon"></i>
              </span>
            </li>
          </ul>
          <img src="images/line.png" class="switch_btn" alt="">
        </div>
        <!-- 歌曲信息容器 -->
        <div class="player_con" :class="{playing:isPlay}">
          <img src="images/player_bar.png" class="play_bar" />
          <!-- 黑胶碟片 -->
          <img src="images/disc.png" class="disc autoRotate" />
          <img :src="coverUrl==''?'./images/cover.png':coverUrl" class="cover autoRotate" />

          <!-- <div id="app"> -->
          <template>
            <el-select v-model="cat" placeholder="请选择" @change="changeCat">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </template>
          <!-- </div> -->

        </div>
        <!-- 评论容器 -->
        <div class="comment_wrapper" ref='comment_wrapper'>
          <h5 class='title'>热门留言</h5>
          <div class='comment_list'>

            <dl v-for="item in hotComments">
              <dt>
                <img :src="item.user.avatarUrl" alt="" />
              </dt>
              <dd class="name">{{item.user.nickname}}</dd>
              <dd class="detail">
                {{item.content}}
              </dd>
            </dl>
          </div>
          <img src="images/line.png" class="right_line">
        </div>
      </div>
      <div class="audio_con">
        <audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>
      </div>
      <div class="video_con" v-show="showVideo">
        <video ref='video' :src="mvUrl" controls="controls"></video>
        <div class="mask" @click="closeMv"></div>
      </div>
    </div>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 官网提供的 axios 在线地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <!-- <script src="//unpkg.com/vue/dist/vue.js"></script> -->
  <script src="//unpkg.com/element-ui@2.13.2/lib/index.js"></script>
  <script src="./js/qs.js"></script>
  <script type="text/javascript">
    // 设置axios的基地址
    axios.defaults.baseURL = 'https://store.jmwebseo.cn/appserver';


    // 实例化vue
    var app = new Vue({
      el: "#player",
      data: {
        // 搜索关键字
        query: '',
        // 歌曲列表
        musicList: [],
        // 歌曲url
        musicUrl: '',
        // 是否正在播放
        isPlay: false,
        // 歌曲热门评论
        hotComments: [],
        // 歌曲封面地址
        coverUrl: '',
        // 显示视频播放
        showVideo: false,
        // mv地址
        mvUrl: '',

        options: [{
          value: '1',
          label: '能量书仓'
        }, {
          value: '2',
          label: '华山论剑'
        }, {
          value: '3',
          label: '理财'
        }, {
          value: '5',
          label: '在线视频'
        }, {
          value: '9',
          label: '公考-基础课程'
        }, {
          value: '10',
          label: '公考-提高课程'
        }],
        cat: '1',
        page: 1,
        songTitle: '',
        disMvIcon : false

      },
      // mounted() {
      //   this.load()
      // },
      // 方法
      methods: {
        // 搜索歌曲
        searchMusic() {
          if (this.query == 0) {
            return
          }
          axios.get('/search?keywords=' + this.query).then(response => {
            // 保存内容
            this.musicList = response.data.result.songs;
            console.log(this.musicList);
          })

          // 清空搜索
          this.query = ''
        },

        // 改变分类
        changeCat() {
          console.log('改变分类');
          this.page = 1;
          this.musicList = [];
          this.load();
        },

        //加载数据
        load() {
          if (this.cat == 0) {
            return
          }
          // axios.post("/", { c: "mp3", a: 'getInfo', debugmod: '3', cat: this.cat, pageLimit: '10', page: 1 })
          //   .then(function (response) {
          //     console.log(response);
          //     // console.log(this.skill);
          //   }, function (err) {
          //     console.log(err);
          //   })

          var rqc = '';
          if (this.cat <= 3) {
            rqc = 'mp3'
            this.disMvIcon = false
          } else {
            rqc = 'video'
            this.disMvIcon = true
          }
          var that = this;
          axios({
            method: 'post',
            url: "/",
            data: Qs.stringify({
              c: rqc,
              a: 'getInfo',
              debugmod: '3',
              cat: that.cat, pageLimit: '20', page: that.page
            }),
            timeout: 3000,
          })
            .then(function (response) {
              // console.log(response);
              // 保存内容
              response.data.data.forEach(function (element, index) {
                // alert($(this).text())
                that.musicList.push(response.data.data[index]);
              });
              // console.log(that.musicList);

              that.page = that.page + 1;
            })
            .catch(function (error) {
              console.log(error);
            });
          ///***
        },

        // 播放歌曲
        playMusic(musicId) {
          // 获取歌曲url
          // axios.get('/song/url?id=' + musicId).then(response => {
          //   // 保存歌曲url地址
          //   this.musicUrl = response.data.data[0].url
          // })

          var playUrl = this.musicList[musicId].url
          // console.log(playUrl);
          this.musicUrl = playUrl
          this.songTitle = this.musicList[musicId].title

        },
        // audio的play事件
        play() {
          this.isPlay = true
          // 清空mv的信息
          this.mvUrl = ''
        },
        // audio的pause事件
        pause() {
          this.isPlay = false
        },
        // 播放mv
        playMv(vid) {
          if (vid) {
            this.showVideo = true;
            // 获取mv信息
            // axios.get('/mv/url?id=' + vid).then(response => {
            //   // console.log(response)
            //   // 暂停歌曲播放
            //   this.$refs.audio.pause()
            //   // 获取mv地址
            //   this.mvUrl = response.data.data.url
            // })
            // 暂停歌曲播放
            this.$refs.audio.pause()
            var playUrl = this.musicList[vid].url
            console.log(playUrl);
            this.mvUrl = playUrl
          }
        },
        // 关闭mv界面
        closeMv() {
          this.showVideo = false
          this.$refs.video.pause()
        },
        // 搜索历史记录中的歌曲
        historySearch(history) {
          this.query = history
          this.searchMusic()
          this.showHistory = false;
        }
      },

    })

  </script>
</body>

</html>